<template>
  <el-dialog :visible.sync="showDialog" width="1000px" @close="closeDialog" :close-on-click-modal="false">
    <div class="wx-tag-dialog-main">
      <el-form ref="form" :model="tagForm" label-width="100px">
        <el-form-item label="已选标签：">
          <div style="max-height: 160px" class="overflow_y">
            <wx-link @close="removeTag(i)" closable v-for="(tag,i) in tagForm.tags" :key="i" tag>{{
                tag.name
              }}
            </wx-link>
          </div>
        </el-form-item>
        <el-form-item label="筛选方式：" v-if="intersection">
          <el-radio v-model="tagForm.intersection" :label="0">交集</el-radio>
          <el-radio v-model="tagForm.intersection" :label="1">并集</el-radio>
        </el-form-item>
        <el-form-item label="标签类型：">
          <div class="wx-tag-filter-wrapper">
            <div class="tag-filter-wrapper al-flex-1">
              <el-select class="filter" size="mini" v-model="tagForm.tagType"
                         @change="loadTag"
                         placeholder="请选择">
                <el-option v-for="item in tagTypes" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
              <div class="filter">标签组：</div>
              <el-select class="filter" size="mini" v-model="tagForm.tagGroup" placeholder="请选择" @change="selectGroup">
                <el-option v-for="item in tagGroups" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
              <el-input class="al-width-300 filter" size="mini" v-model="tagForm.tagName" maxlength="15"
                        placeholder="输入标签名称"/>
            </div>
            <div class="tag-filter-wrapper">
              <el-button class="filter" size="mini" type="primary" @click="selectTag">搜索</el-button>
              <el-button class="filter" size="mini" type="primary" @click="tagSelectAll">全选</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <div class="wx-tag-main">
        <div class="overflow_y">
          <div class="wx-tag" v-for="(group) in currentGroupData" :key="group.id">
            <div class="wx-tag-group">{{ group.groupName }}</div>
            <div>
              <wx-link class="tag" tag :type="tagTypeChange(t)"
                       v-for="(t) in group.tags"
                       @click.native="choiceTag(t)"
                       :key="t.id">{{ t.name }}
              </wx-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import WxLink from "@/components/wxqy/wxLink/wxLink";
import {tagDialog} from "@/api/wxqy/wxTestData";
import {qywxContactTagList} from "@/api/wxqy/qiyeWeixinTag";

/**
 *@sure 确定事件
 */
export default {
  name: "wxTag",
  components: {WxLink},
  props: {
    show: false,
    intersection: {
      default: false
    },
    choiceTags: null
  },
  watch: {
    show: function (v) {
      this.showDialog = v
      if (!this.currentGroupData) {
        this.loadData()
      }
    },
    choiceTags: function (v) {
      this.tagForm.tags = Object.assign([], v || [])
      if (!this.show && v && v.length) { // 隐藏的时候有移除操作时执行
        this.initShowChoiceTag()
      }
    }
  },
  data() {
    return {
      showDialog: this.show,
      type: 1, // 1并集，0交集
      tagTypes: [{name: '自建标签', id: 0}, {name: '企微标签', id: 1}],
      tagGroups: [{name: '全部', id: 0}],
      currentGroupData: null,
      selectBackup: [],
      tagForm: {
        tags: [], intersection: 1, tagType: 1, tagGroup: 0
      }
    }
  },
  methods: {
    loadData() {
      this.loadStrategy()
      this.loadTag()
    },
    initShowChoiceTag() {
      if (this.choiceTags && this.choiceTags.length && this.currentGroupData) {
        let ids = this.choiceTags.map(t => t.id)
        for (let i = 0; i < this.currentGroupData.length; i++) {
          let tags = this.currentGroupData[i].tags
          tags.map(t => t.check = ids.includes(t.id))
        }
      }
    },
    loadStrategy() {//添加类型
      this.tagTypes = this.tagTypes.concat([])
    },
    loadTag() {
      qywxContactTagList(this.tagForm.tagType).then(e => {
        let {data} = e
        const group = data.map(t => {
          return {id: t.id, name: t.groupName}
        })
        this.tagGroups = this.tagGroups.concat(group)
        this.currentGroupData = data
        this.selectBackup = data
        this.initShowChoiceTag()
      })
    },
    closeDialog() {
      this.showDialog = false
      this.$emit('update:show', false)
    },
    sure() {
      this.$emit('sure', this.tagForm.tags)
      this.closeDialog()
    },
    removeTag(index) {
      const tags = this.tagForm.tags
      const tagId = tags[index].id
      tags.splice(index, 1)
      for (const group of this.currentGroupData) {
        let find = false
        for (const tag of group.tags) {
          find = tag.id === tagId
          if (find) {
            tag.check = false
            break
          }
        }
        if (find) {
          break
        }
      }
    },
    tagTypeChange(t) {
      return t.check ? 'primary' : 'info'
    },
    choiceTag(tag) {
      if (!tag.check) {
        this.tagForm.tags.push(tag)
      } else {
        this.tagForm.tags = this.tagForm.tags.filter(t => t.id !== tag.id)
      }
      tag.check = !tag.check
    },
    selectGroup(groupId) {
      if (groupId > 0) {
        let find = []
        for (const group of this.selectBackup) {
          if (group.groupId === groupId) {
            find.push(group)
            break
          }
        }
        this.currentGroupData = find
      } else {
        this.currentGroupData = this.selectBackup
      }
    },
    tagSelectAll() {
      let choiceCount = 0
      this.currentGroupData.map(group =>
        group.tags
          .filter(tag => !tag.check)
          .map(tag => {
            choiceCount++
            tag.check = true
            this.tagForm.tags.push(tag)
          })
      )
      if (choiceCount === 0) {
        let removeTagIds = []
        this.currentGroupData.map(group =>
          group.tags
            .filter(tag => tag.check)
            .map(tag => {
              tag.check = false
              removeTagIds.push(tag.id)
            })
        )
        this.tagForm.tags = this.tagForm.tags.filter(tag => !removeTagIds.includes(tag.id))
      }
    },
    selectTag() {
      let keyword = this.tagForm.tagName
      if (keyword) {
        let findList = []
        let groups = this.selectBackup
        for (const group of groups) {
          let findGroup = {groupId: group.groupId, groupName: group.groupName, tags: []}
          for (const tag of group.tags) {
            if (tag.name.includes(keyword)) {
              findGroup.tags.push(tag)
            }
          }
          if (findGroup.tags.length) {
            findList.push(findGroup)
          }
        }
        this.currentGroupData = findList
      } else {
        this.currentGroupData = this.selectBackup
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/common";

.wx-tag-dialog-main {
  max-height: 580px;
}

.wx-tag-filter-wrapper {
  @include flex-between;
}

.tag-filter-wrapper {
  @include flex-start;

  .filter {
    margin: 0 4px;
  }
}

.wx-tag-main {
  height: 300px;

  .wx-tag {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: 4px;
    margin: 4px 0 10px 0;
    @include flex-start;

    .wx-tag-group {
      width: 200px;
      text-align: left;
      padding-left: 20px;
      flex-shrink: 0;
    }
  }
}

.tag {
  cursor: pointer;
}
</style>
